<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Table <span>Reorder</span></h1>
        <p>Order of the columns and rows can be changed using drag and drop.</p>
    </div>
</div>

<div class="content-section implementation">
    <div class="card">
        <p-table [value]="products" [columns]="cols" [reorderableColumns]="true">
            <ng-template pTemplate="header" let-columns>
                <tr>
                    <th style="width:3rem"></th>
                    <th *ngFor="let col of columns" pReorderableColumn>
                        {{col.header}}
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-columns="columns" let-index="rowIndex">
                <tr [pReorderableRow]="index">
                    <td>
                        <span class="pi pi-bars" pReorderableRowHandle></span>
                    </td>
                    <td *ngFor="let col of columns">
                        {{rowData[col.field]}}
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-tablereorder-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-table [value]="products" [columns]="cols" [reorderableColumns]="true"&gt;
    &lt;ng-template pTemplate="header" let-columns&gt;
        &lt;tr&gt;
            &lt;th style="width:3rem"&gt;&lt;/th&gt;
            &lt;th *ngFor="let col of columns" pReorderableColumn&gt;
                &#123;&#123;col.header&#125;&#125;
            &lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowData let-columns="columns" let-index="rowIndex"&gt;
        &lt;tr [pReorderableRow]="index"&gt;
            &lt;td&gt;
                &lt;span class="pi pi-bars" pReorderableRowHandle&gt;&lt;/span&gt;
            &lt;/td&gt;
            &lt;td *ngFor="let col of columns"&gt;
                &#123;&#123;rowData[col.field]&#125;&#125;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-table&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123; Component, OnInit &#125; from '@angular/core';
import &#123; Product &#125; from '../../domain/product';
import &#123; ProductService &#125; from '../../service/productservice';

@Component(&#123;
    templateUrl: './tablereorderdemo.html'
&#125;)
export class TableReorderDemo implements OnInit &#123;

    products: Product[];

    cols: any[];

    constructor(private productService: ProductService) &#123; &#125;

    ngOnInit() &#123;
        this.productService.getProductsSmall().then(data =&gt; this.products = data);

        this.cols = [
            &#123; field: 'code', header: 'Code' &#125;,
            &#123; field: 'name', header: 'Name' &#125;,
            &#123; field: 'category', header: 'Category' &#125;,
            &#123; field: 'quantity', header: 'Quantity' &#125;
        ];
    &#125;
&#125;
</app-code> 
        </p-tabPanel>

        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-tablereorder-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>